<template>
    <div :class="{'pic-container': true, 'circle': circle}">
        <template v-if="!url || url.length === 0">
            <div class="placeholder no-pic"></div>
        </template>
        <template v-else class="wid-hei">
            <div v-if="contain" class="wid-hei">
                <img v-lazy.container="url">
            </div>
            <div v-else class="wid-hei">
                <img v-lazy="url">
            </div>
        </template>
    </div>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
      default: ''
    },
    circle: {
      type: Boolean,
      default: false
    },
    contain: { //图片直接在window里面,不需要滚动，传组件外层id
        type: String,
        default: ''
    }
  },
  data() {
    return {
    }
  },
  methods: {

  },
  mounted(){
    //console.log(this.url)
  }
}

</script>
<style lang="less" scoped>
    @import "../../assets/css/utilities/decorate_base.less";
    .wid-hei{
        width: 100%;
        height: 100%;
    }
    .pic-container {
        display: inline-block;
        &:extend(.wid-hei);
    }
    .circle {
       .bor-radius(50%);
    }
    .placeholder {
        display: inline-block;
        &:extend(.wid-hei);
        background: url("../../assets/image/loading.jpg") no-repeat center center;
        background-size: cover;
    }
    .no-pic {
        background-color: #ddd;
        background-size: cover;
    }
    img {
        &:extend(.wid-hei);
        max-height: 100%;
    }
    image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }
</style>
